<template>
  <div>
    <!-- 日历选择器 -->
    <!-- 选择年份 -->
    <el-select v-model="currentYear" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
    <!-- 选择月份 -->
    <el-select v-model="currentMonth" placeholder="请选择">
      <el-option
        v-for="item in 12"
        :key="item.value"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-calendar v-model="curDate">
      <template #dateCell="{ date, data }">
        <p :class="data.isSelected ? 'is-selected' : ''">{{ isDate(date) }}</p>
        <span v-if="isShow(date)" class="rest">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calender',
  data() {
    return {
      // curDate: new Date(),
      currentMonth: new Date().getMonth() + 1,
      currentYear: new Date().getFullYear(), // 2021
      currentDay: new Date().getDate(),
      options: []
    }
  },
  computed: {
    curDate: {
      get() {
        return new Date(
          `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
        )
      },
      set(val) {
        new Date(val)
      }
    }
  },
  created() {
    Array.from(Array(11), (item, i) => {
      this.options.push(this.currentYear + i - 5) // [2016,2017,...,2026]
    })
  },
  methods: {
    isDate(d) {
      return d.getDate()
    },
    isShow(d) {
      var week = d.getDay()
      if (week === 0 || week === 6) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.is-selected {
  background: #409eff;
  display: inline-block;
  position: relative;
  text-align: center;
  left: -3px;
  width: 26px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  color: #fff;
}
// ::v-deep .el-calendar__header {
//   display: none;
// }
::v-deep .el-calendar-day {
  padding: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rest {
  display: inline-block;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  font-size: 13px;
  color: #fff;
  background-color: #fa7c4d;
  border-radius: 50%;
}
</style>
